<template>
    <van-tabs
        v-model:active="activeName"
        background="#f0f0f0"
        title-active-color="#1890FF"
        :line-width="tabWidth"
        line-height="2"
        class="detail-container">
        <!-- 管理 -->
        <van-tab
            :title="$t('wp-guan-li')"
            name="manage">
            <keep-alive>
                <manage
                    v-if="activeName === 'manage'"
                    :uuid="uuid"
                    :productId="product_id"></manage>
            </keep-alive>
        </van-tab>
        <!-- 详情 -->
        <van-tab
            :title="$t('wp-xiang-qing')"
            name="details">
            <keep-alive>
                <product-details
                    v-if="activeName === 'details'"
                    :productId="product_id">
                </product-details>
            </keep-alive>
        </van-tab>
        <!-- 统计 -->
        <van-tab
            :title="$t('wp-tong-ji')"
            name="monitor">
            <keep-alive>
                <monitor
                    v-if="activeName === 'monitor'"
                    :uuid="uuid"></monitor>
            </keep-alive>
        </van-tab>
        <!-- 关联 -->
        <van-tab
            :title="$t('wp-guan-lian')"
            name="relation">
            <keep-alive>
                <relation
                    v-if="activeName === 'relation'"
                    :productId="product_id"
                    :manufacturecode="manufacturecode"
                    :customerId="customer_id"></relation>
            </keep-alive>
        </van-tab>
    </van-tabs>
</template>

<script>
import manage from './common/manage.vue';
import ProductDetails from './common/productDetails.vue';
import monitor from './common/monitor.vue';
import relation from './common/relation.vue';
import { computed, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

export default {
    components: {
        manage,
        ProductDetails,
        monitor,
        relation
    },
    setup () {
        const route = useRoute();
        const activeName = ref('manage');

        const uuid = computed(() => {
            return route.query.uuid;
        });

        const customer_id = computed(() => {
            return route.query.customer_id;
        });

        const product_id = computed(() => {
            return route.query.product_id;
        });

        const manufacturecode = computed(() => {
            return route.query.manufacturecode;
        });
        const tabWidth = computed(() => {
            const width = document.body.clientWidth / 4;
            return width || 40;
        });

        onMounted(() => {
            document.title = route.query.devalias || uuid.value;
        });

        return {
            uuid,
            activeName,
            tabWidth,
            customer_id,
            product_id,
            manufacturecode
        };
    }
};
</script>
<style scoped lang="scss">
.detail-container {
    background-color: #f0f0f0;
    font-size: 15px;
}
</style>
